<template>
    <div class="page-container">
        <oa-top-bar :title="title" :show-back="enableBack" :right-buttons="rightButtons" @rightActionClick="rightActionClick"/>
        <div class="page-wrapper">
            <slot/>
        </div>
    </div>
</template>

<script>
    import OaTopBar from "./oa-top-bar";

    export default {
        components: {OaTopBar},
        name: "oa-page",
        props: {

            enableBack: {
                type: Boolean,
                default: true
            },
            title: {
                type: String,
                default: '',
                required: true
            },
            rightButtons: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        methods: {
            back() {
                this.$router.back()
            },
            rightActionClick(item, index) {
                this.$emit("rightActionClick", item, index)

            },
        }

    }
</script>

<style scoped lang="less">
    .page-container {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #f0f0f0;

        > .page-wrapper {
            height: calc(~"100% - 44px");
            background: #f0f0f0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch
        }

    }

</style>